<template>
    <el-row ref="cardFall" class="card-fall">
        <el-row class="col-1" justify="center" @click="setDrawerShow(true)">
            时
            <br />
            间
            <br />
            线
        </el-row>
        <el-row class="col-2" justify="center"><CardFlow /></el-row>
    </el-row>
    <!-- <TimeLine ref="timeLineRef" /> -->
</template>

<script>
    import { defineComponent, onMounted, ref } from 'vue'
    import CardFlow from '@/components/card-flow/index.vue'
    import TimeLine from './time-line/time-line.vue'
    import BScroll from '@better-scroll/core'
    import InfinityScroll from '@better-scroll/infinity'
    BScroll.use(InfinityScroll)

    export default defineComponent({
        name: 'CardFall',
        components: {
            CardFlow,
            TimeLine,
        },
        setup() {
            let cardFall = ref(null)
            let timeLineRef = ref(null)

            onMounted(() => {
                const h = cardFall.value.$el.parentNode.clientHeight
                // scroll = new BScroll(cardFall.value)
            })

            function setDrawerShow(v) {
                timeLineRef.value.setDrawerShow(true)
            }

            return { cardFall, setDrawerShow, timeLineRef }
        },
    })
</script>

<style lang="less" scoped>
    @import url('@/common.less');
    .card-fall {
        width: 100%;
        .col-2 {
            width: calc(100% - 20px);
            height: 100%;
        }
        .col-1 {
            font-size: 12px;
            padding: 8px;
            font-weight: bold;
            width: 20px;
            position: fixed;
            left: 0px;
            top: 50%;
            color: #909399;
            transform: translateY(-50%);
            border-radius: 0px 5px 5px 0px;
            background: white;
            box-shadow: 0px 2px 10px #909399;
            user-select: none;
            cursor: pointer;
        }
    }
</style>
